<template>
<div class="wrapper">
  <div class="info-panel">
    <div class="info-title">问诊医生</div>
    <div class="input-label">
      <input type='text' v-model="detailData.doctor_name" placeholder='请输入' class="info-input"/>
    </div>
  </div>
  <div class="info-panel">
    <div class="info-title">问诊时间</div>
    <div class="picker-date">
      <picker mode='date' class="date" :value="date" @change="bindCheckinDateChange">
        <div class='picker'>
          {{ date }}
        </div>
      </picker>
      <picker mode='time' class="date" :value="time" @change="bindCheckinTimeChange">
        <div class='picker'>
          {{ time }}
        </div>
      </picker>
    </div>
  </div>
  <div class="info-panel">
    <div class="info-title">病例</div>
    <div class="images-list-box">
      <img :src="item.url" alt="" v-for="(item,idx) in detailData.case_imgs" :key="idx" class="images-list">
      <div class="uploadBox uploadBox2" @click="chooseAndUploadImage">
        <image class="uploadIcon" src='@/static/images/upload.png' />
      </div>
    </div>
  </div>
  <div>
    <button class='btn-max-w' type='primary' @click="ev_save">保存</button>
  </div>
</div>
</template>

<script>
	import request from '../../utils/request'
export default {
  components:{
  },
  data() {
    return {
      seekdesc:'',
      name:'',
      sex:undefined,
      age:undefined,
      doctor_name:'',
      inquiry_at:'',
      case_imgs:[],
      inspect_imgs:[],
      illness_info:'',
      id:undefined,
      date:'选择日期',
      time:'选择时间',
      multiArrayIndex:0,
      multiArray: ['男','女'],
      gender:'',
      detailData:{},
    }
  },
  async onLoad(option) {
    this.detailData = JSON.parse(option.detailData)
    this.date = this.detailData.inquiry_at.split(' ')[0]
    this.time = this.detailData.inquiry_at.split(' ')[1]
    console.log("🚀 ~ onLoad ~ this.detailData:", this.detailData)
  },
  methods: {
    pickSex(e){
      console.log("🚀 ~ pickSex ~ e:", e)
      this.gender = e.detail.value
    },
    bindCheckinDateChange(e){
      this.date = e.detail.value
    },
    bindCheckinTimeChange(e){
      this.time = e.detail.value
    },
    chooseAndUploadImage() {
      // 选择图片
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          const uploadTask = uni.uploadFile({
            url: 'http://aiwz.mguit.com/api/pub/uploadImg', // 服务器上传接口
            filePath: tempFilePaths[0],
            name: 'file', // 必须填写，后台用来接收文件
            formData: {
              'ocr': 'ocr' // 其他要上传的参数
            },
            success: (uploadFileRes) => {
              const { ocr_url, url, words} = JSON.parse(uploadFileRes.data).data
              const originalFileName = JSON.parse(uploadFileRes.data)
              console.log("🚀 ~ chooseAndUploadImage ~ originalFileName:", originalFileName)
              console.log('upload success:', uploadFileRes);
              this.case_imgs.push({
                ocr_url, url, words
              })
            },
            fail: (uploadFileErr) => {
              console.error('upload fail:', uploadFileErr);
            }
          });
          uploadTask.onProgressUpdate((res) => {
            console.log("🚀 ~ uploadTask.onProgressUpdate ~ res:", res)
          });
        },
        fail: (chooseImageErr) => {
          console.error('choose image fail:', chooseImageErr);
        }
      });
    },

    async ev_save(){
      let parameters = this.detailData
      parameters.inquiry_at = `${this.date} ${this.time}`,

      await request('api/case1/caseadd', 'post', parameters);
      uni.showToast({
        title: '保存成功',
        icon: 'success',
        mask: true
      })
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/home/index'
        });
      }, 1500);
    
    },
    toPage(url){
        uni.navigateTo({
          url: url
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  display       : flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 15upx;
  padding-bottom: 50upx;
  .picker-date {
    display: flex;
    justify-content: space-between;
    margin-top: 30upx;
    .date {
      width: 320upx;
      height: 80upx;
      background: #F0F9FF;
      border-radius: 60upx 60upx 60upx 60upx;
      border: 1upx solid #66C2FF;
      color: #BDBDBD;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .info-panel {
    padding: 40upx 0;
    margin: 0 10upx;
    border-bottom: #E9E9E9 1upx solid;
    .info-title  {
      font-size: 32upx;
      color: hsl(0, 0%, 0%);
      position: relative;
      padding-left: 20upx;
      &::before{
        content: '';
        position: absolute;
        width: 8upx;
        height: 30upx;
        background-color: #0094FF;
        border-radius: 4upx;
        left: 0;
        top: 8upx;
      }
    }
    .info-avatar {
      display: block;
      width  : 120upx;
      height : 120upx;
      margin-top: 20upx;
    }
    .input-label {
      width: 660upx;
      height: 80upx;
      background: #FFFFFF;
      border-radius: 10upx 10upx 10upx 10upx;
      border: 3upx solid #E9E9E9;
      display: flex;
      align-items: center;
      color: #000000;
      padding: 0 20upx;
      margin-top: 40upx;
    }
    .info-input {
      color: #0e0e0e;
      border: none;
      margin-left: 30upx;
      width: 80%;
    }
    .info-area {
      height: 300upx;
      width: 660upx;
      line-height: 1;
      padding: 20upx;
      border-radius: 10upx 10upx 10upx 10upx;
      border: 3upx solid #E9E9E9;
      margin-top: 30upx;
      margin-left: 0;
    }
    .picker {
      color: #7d7d7d;
    }
  }
  .images-list {
    width: 200upx;
    height: 200upx;
  }
  .btn-max-w {
    background-color: #0094FF;
    border-radius: 130upx;
    width: 600upx;
    margin-top: 80upx;
  }
  .images-list-box {
    display: flex;
    gap: 8px;
    margin-top: 30upx;
    flex-wrap: wrap;
  }
  .uploadBox {
    width: 100%;
    height: 100upx;
    background: #FFFFFF;
    border-radius: 10upx 10upx 10upx 10upx;
    border: 3upx solid #E9E9E9;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .uploadBox2 {
    width: 200upx;
    height: 200upx;
  }
  .uploadIcon {
    width: 40upx;
    height: 40upx;
  }
}


</style>
